Vue.component("login",{
    props:["path"],
    template:`
        <div>
            <el-dialog title="登录窗口" :visible.sync="dialogFormVisible" width="400px">
              <el-form>
                <el-form-item label="账号" :label-width="formLabelWidth">
                  <el-input v-model="username" autocomplete="off"></el-input>
                </el-form-item>
                 <el-form-item label="密码" :label-width="formLabelWidth">
                  <el-input v-model="password" autocomplete="off" type="password"></el-input>
                </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-link @click.prevent="forget">忘记密码</el-link>
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="login">确 定</el-button>
              </div>
            </el-dialog>
        </div>
    `,
    data(){
        return {
            user:null,  // 登录的用户对象
            username:"",
            password:"",
            dialogFormVisible: false,
            formLabelWidth: 100
        };
    },
    created(){
        this.getMyInfo();
    },
    methods:{
        getMyInfo(){
            axios.get(this.path+"myinfo").then(res=>{
                this.user = res.data.data;
                // 发布自定义事件
                this.$emit('onlogin', this.user);
            })
        },
        login(){
            let p = new URLSearchParams();
            p.append("username",this.username);
            p.append("password",this.password);
            axios.post(this.path+"login",p).then(res=>{
                if(res.data.code == 1){
                    this.$message(res.data.msg);
                    this.user = res.data.data;
                    this.dialogFormVisible = false;
                    // 发布自定义事件
                    this.$emit('onlogin', this.user);
                } else {
                    this.$alert(res.data.msg);
                }
            })
        },
        showLogin(){
            this.dialogFormVisible = true;
        },
        forget(){
            if(!this.username){
                this.$alert("请输入账号!");
                return;
            }
            axios.get(this.path+"forget?username="+this.username).then(res=>{
                this.$alert(res.data.msg);
            })
        }
    }
})